<template>
  <div>
    <table class="tb">
      <tr>
        <td>欢迎光临_vue开发的收银系统_水果店</td>
      </tr>
      <tr>
        <td>苹果 {{ msg }}￥/斤，折扣{{ count }}折></td>
      </tr>
      <tr>
        <td>请输入你要购买的斤数<input type="text" v-model="num" /></td>
      </tr>
      <tr>
        <td><button @click="sum">结账买单~</button></td>
      </tr>
      <tr>
        <td>
          结账单：总价{{ sum1 }}￥元 折后价：{{ count1 }}￥元 省了：{{
            save
          }}￥元
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      msg: 10,
      count: 8,
      num: 0,
      sum1: 0,
      count1: 0,
      save: 0,
    };
  },
  computed: {},
  watch: {},
  created() {},
  methods: {
    sum() {
      this.sum1 = this.num * this.msg;
      this.count1 = (this.sum1 * this.count) / 10;
      this.save = this.sum1 - this.count1;
    },
  },
};
</script>

<style scoped>
.tb {
  border-collapse: collapse;
  width: 100%;
}

.tb th {
  background-color: #0094ff;
  color: white;
}

.tb td,
.tb th {
  padding: 5px;
  border: 1px solid black;
  text-align: center;
}
</style>
